import React, { Component,Fragment } from 'react';
import Header from '../components/Header'
import Tab from '../components/Tab'
import Saga from './redux/saga'
import Thunk from './redux/thunk'
import Redux from './redux/react-redux'
import { Route } from 'react-router-dom'


const list = [{name:"redux",path:"/redux/redux"},{name:"saga",path:"/redux/saga"},{name:"thunk",path:"/redux/thunk"}];
class RouterPage extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            list:list,
        }
    }
    render() { 
        return ( <Fragment>
            <Header title="react-header-component"/>
            <Tab list={this.state.list} />
            <Route exact path="/redux/saga" component={Saga}/>
            <Route exact path="/redux/thunk" component={Thunk}/>
            <Route exact path="/redux/Redux" component={Redux}/>
        </Fragment> );
    }
}
 
export default RouterPage;